<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <script type="text/javascript" src="../src/main.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    <title>Document</title>
</head>

<body>
    <div id="root">
        <h1>Hello World{{ message }}</h1>
        <!-- v-bind单向数据绑定是data大于innerHTML -->
        <a :href="url">百度</a>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        new Vue({
            el: '#root',
            data: {
                message: 'Hello Vue!',
                url: 'https://www.baidu.com'
            },
        })
    </script>

    <div id="root1">
        <!-- <input type="text" v-bind:value="num"> -->
        <!-- <input type="text" v-model:value="num"> -->
        <!-- v-model数据值与页面值双向赋值，v-bind页面值=数据值 -->
        <input type="text" :value="num">
        <input type="text" v-model="num">
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        new Vue({
            el: '#root1',
            data: {
                num: '123',
            },

        });

    </script>
    <div id="root2">
        <h1>Hello World{{ message }}</h1>
    </div>
    <script type="text/javascript">
        let obj={
            test:()=>{

            },
            test1:function(){},
            test3(){}
        }
   export default
        Vue.config.productionTip = false;
        const v = new Vue({
            // el: '#root2',
            // data: {
            //     message: 'Hello Vue!',
            // },
            data: function () {
                return {
                    message: 'Hello Vue!',
                }
            },
        })
        setInterval(() => {
            // v不是一个函数，只是一个容器，属性为空
            v.$mount('#root2')
        }, 1000);

        let person = {
            name: 'Tom',
            age: 25,
        }
        console.log(Object.keys(person));

        let personA = {
        }
        // Object.defineProperties不参与遍历，影响原型链

        Object.defineProperties(personA, "age", {
            value: 30,
            // 默认为false，表示该属性不可遍历
            enumerable: true,
            // 默认为false，表示该属性不可删除
            configurable: true,
            // 默认为false，表示该属性不可修改
            writable: true,
            // get,读取时调用
            get() {
                console.log("get age");
                return number;
            },
            // set，修改时调用
            set(value) {
                console.log("set age");
                number = value;
            }
        });
        
        console.log(Object.keys(personA));
    </script>

</body>

</html>